<template>
	<view class="login" v-if="showPopupMiddle">
		<!-- 第一步，小程序授权 -->
		<view class="card" v-if="step == 0">
			<h3>授权登录</h3>
			<i class="iconfont close" @click="close">&#xe607;</i>

			<view class="content">
				<span>玖玖优拼申请获得以下权限：</span>
				<span>获取您的公开信息（头像、昵称等）</span>
			</view>

			<button open-type="getUserInfo" @getuserinfo="getUserInfo" class="next" type="primary">
				授权登录
			</button>
		</view>
		<!-- 第一步输入手机号 -->
		<view class="card" v-if="step == 1">
			<h3>登录</h3>
			<i class="iconfont close" @click="close">&#xe607;</i>
			<view class="inputBox">
				<input
					class="uni-input"
					placeholder="输入手机号"
					type="number"
					v-model="phone"
					@input="clearInput"
				/>
				<i @click="clearIconInput" class="iconfont clear" v-if="showClearIcon">&#xe658;</i>
			</view>

			<button type="primary" class="next" @click="nextSecond">下一步</button>

			<p class="p1">点击下一步代表</p>
			<p>
				<span>阅读并同意</span>
				<span>《玖玖优拼服务协议》</span>
			</p>
		</view>

		<!-- 第二步获取验证码 -->
		<view class="card code" v-if="step == 2">
			<i @click="returnback" class="iconfont back">&#xe638;</i>
			<h3>输入验证码</h3>
			<i class="iconfont close" @click="close">&#xe607;</i>

			<view class="content">
				<span>{{ phone }}</span>
				<span class="btn">重新发送</span>
			</view>

			<view class="codes">
				<view v-for="item in config.count" :key="item.key">
					<view
						class="input"
						@tap="hanldeOpenKeyboard"
						:class="{ active: currentFocus == item.index }"
					>
						<template v-if="code[item.index - 1] != undefined">
							{{ code[item.index - 1] }}
						</template>
						<template v-else>
							<view v-if="currentFocus == item.index" class="shining"></view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<NumberKeyboard
			ref="NumberKeyboard"
			@number="inputCode"
			@delete="deleteCode"
		></NumberKeyboard>
	</view>
</template>

<script>
import NumberKeyboard from './numberKeyboard.vue';
import uniIcon from '../../components/uni-icon.vue';
import API from '@/common/api';
import utils from '@/common/utils';
export default {
	data() {
		return {
			currentFocus: 1,

			config: {
				count: [
					{
						index: 1,
						key: 'valid-code-input-1'
					},
					{
						index: 2,
						key: 'valid-code-input-2'
					},
					{
						index: 3,
						key: 'valid-code-input-3'
					},
					{
						index: 4,
						key: 'valid-code-input-4'
					},
					{
						index: 5,
						key: 'valid-code-input-5'
					},
					{
						index: 6,
						key: 'valid-code-input-6'
					}
				],

				loop: [
					{
						number: 1,
						key: 'number-1'
					},
					{
						number: 2,
						key: 'number-2'
					},
					{
						number: 3,
						key: 'number-3'
					},
					{
						number: 4,
						key: 'number-4'
					},
					{
						number: 5,
						key: 'number-5'
					},
					{
						number: 6,
						key: 'number-6'
					},
					{
						number: 7,
						key: 'number-7'
					},
					{
						number: 8,
						key: 'number-8'
					},
					{
						number: 9,
						key: 'number-9'
					}
				]
			},
			code: [],
			showPopupMiddle: false,
			phone: '',
			keyboardVisible: false,
			step: 0,
			showClearIcon: false
		};
	},
	onLoad() {},

	methods: {
		hanldeOpenKeyboard() {
			this.$refs.NumberKeyboard.getData(this.config.loop);
			this.$refs.NumberKeyboard.opennumberKeyboardPopupVisible();
		},
		inputCode(e) {
			this.code[this.currentFocus - 1] = e;
			if (this.currentFocus == 6) {
				this.bindMobile();
			}
			if (this.currentFocus <= 6) {
				this.currentFocus++;
			}
		},
		async bindMobile() {
			const json = await API.bindMobile({
				mobile: this.phone,
				token: uni.getStorageSync('token'),
				validationCode: this.code.join('')
			});
			if (json.status == 200) {
				this.close();
			}
		},
		getUserInfo(json) {
			//this.user = json.detail.userInfo;
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					this.waLogin(loginRes, json.detail.userInfo);
				}
			});
		},
		async waLogin(loginRes, user) {
			const json = await API.waLogin({
				jsCode: loginRes.code,
				type: 0,
				avatar: user.avatarUrl,
				gender: user.gender === 2 ? 'female' : 'male',
				name: user.nickName,
				inviteUserId: uni.getStorageSync('sid')
			});

			uni.setStorageSync('mobile', json.data.mobile);
			uni.setStorageSync('token', json.token);
			uni.setStorageSync('myId', json.data.id);

			if (!json.data.mobile) {
				this.step = 1;
			} else {
				this.close();
			}
		},
		//前一步
		returnback() {
			this.step--;
			this.code = [];
			this.currentFocus = 1;
			this.$refs.NumberKeyboard.close();
		},

		deleteCode() {
			this.currentFocus--;
			this.code.splice(-1, 1);
		},

		open() {
			this.step = 0;
			this.showPopupMiddle = true;
		},

		close() {
			this.step = 0;
			this.showPopupMiddle = false;
			this.$refs.NumberKeyboard.close();
		},

		//进入下一步
		async nextSecond() {
			const json = await API.validationCode({
				mobile: this.phone
			});
			if (json.status == 200) {
				this.step = 2;
			}
		},

		clearInput() {
			if (this.phone !== '') {
				this.showClearIcon = true;
			} else {
				this.showClearIcon = false;
			}
		},

		clearIconInput() {
			this.phone = '';
			this.showClearIcon = false;
		}
	},
	components: {
		uniIcon,
		NumberKeyboard
	}
};
</script>

<style lang="less" scoped>
.login {
	position: fixed;
	z-index: 998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	.card {
		width: 83%;
		// height: 400px;
		background: #fff;
		margin: 0 auto;
		border-radius: 6px;
		position: relative;
		padding-bottom: 1rem;
		.close {
			font-size: 0.7rem;
			color: #aaa;
			position: absolute;
			right: 1rem;
			top: 1.4rem;
		}
		.content {
			padding:0 30upx;
			margin-bottom: 100upx;
			text-align: center;
		}
		h3 {
			font-size: 18px;
			color: #000;
			width: 100%;
			text-align: center;
			margin: 1rem 0 2rem 0;
		}

		.inputBox {
			position: relative;
			input {
				width: 13rem;
				margin: 0 auto;
				border-bottom: 1px solid #f2f3f5;
				font-size: 16px;
				padding: 0.2rem;
			}

			.clear {
				position: absolute;
				right: 1.8rem;
				top: 0.5rem;
				color: #ddddde;
				z-index: 333;
			}
		}

		.next {
			width: 80%;
			height: 2.5rem;
			background: #006eea;
			color: #fff;
			margin-top: 1rem;
			border-radius: 0;
			border-radius: 8upx;
		}

		p {
			color: #9e9e9e;
			font-size: 12px;
			text-align: center;
			span:last-child {
				color: #1276eb;
			}
		}

		.p1 {
			margin-top: 1rem;
		}
	}

	.code {
		.back {
			font-size: 0.7rem;
			color: #aaa;
			position: absolute;
			left: 1rem;
			top: 1.4rem;
			transform: rotate(180deg);
		}

		.content {
			text-align: center;
			margin: 1rem 0;
			span:first-child {
				font-size: 14px;
				color: #000;
				margin-right: 0.5rem;
			}
			.btn {
				font-size: 14px;
				color: #afafaf;
				display: inline-block;
				padding: 0.3rem 1rem;
				border: 1px solid #afafaf;
			}
		}

		.codes {
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			padding: 0 0.6rem;
			input {
				background: #ffffff;
				border: 1px solid #eeeeee;
				width: 100upx;
				height: 100upx;
				text-align: center;
			}
			.input {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ffffff;
				border: 1px solid #eeeeee;
				width: 80upx;
				height: 80upx;
				font-size: 50upx;
				font-weight: 500;
				color: #333333;
				.shining {
					border: 1px solid #000;
					height: 44upx;
					animation: shining 1s linear infinite;
					/* 其它浏览器兼容性前缀 */
					-webkit-animation: shining 1s linear infinite;
					-moz-animation: shining 1s linear infinite;
					-ms-animation: shining 1s linear infinite;
					-o-animation: shining 1s linear infinite;
				}
			}
			.active {
				border: 1px solid #000;
				caret-color: #000;
			}
		}
	}
}
</style>
